<template>
  <div class="menus-manage">
    <!-- 面包屑 -->
    <div class="bread-crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>考勤工时</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main-middle">
      <el-card class="box-card">
        <!-- 查询条件 -->
        <el-row class="table-selbox" v-if="btnSel">
          <!-- 查询条件表单 -->
          <el-form :inline="true" :model="formInline" >
            <!-- 人员姓名 -->
            <el-form-item label="员工姓名" prop="userName">
              <el-select
                v-model="formInline.userName"
                filterable
                auto-complete="off"
                placeholder="请选择"
              >
                <el-option label="无" value></el-option>
                <el-option
                  v-for="(item,index) in groupList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
             <!-- 考勤日期 -->
            <el-form-item label="考勤日期" prop="attendDate">
              <el-date-picker
                v-model="formInline.attendDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <!-- 打卡结果 -->
            <el-form-item label="打卡结果" prop="result">
              <el-select
                v-model="formInline.result"
                filterable
                auto-complete="off"
                placeholder="请选择"
              >
                <el-option label="无" value></el-option>
                <!-- 循环所有客户 客户名称 客户ID -->
                <el-option
                  v-for="(item,index) in attResult"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 搜索 -->
            <el-form-item>
              <el-button icon="el-icon-search" @click="selHandle">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <!-- 基本操作按钮 是否授权显示-->
        <el-row class="table-btns" v-if="[btnAdd,btnDel,btnUpload,btnDown].indexOf(true) > -1">
          <!-- 添加 -->
          <!-- <el-button -->
            <!-- v-if="btnAdd" -->
            <!-- type="success" -->
            <!-- size="medium" -->
            <!-- icon="el-icon-document-add" -->
            <!-- @click="addHandle" -->
          <!-- >添加</el-button> -->
          <!-- 删除 -->
          <!-- <el-button -->
            <!-- type="danger" -->
            <!-- size="medium" -->
            <!-- icon="el-icon-delete" -->
            <!-- @click="batchRemove" -->
            <!-- v-if="btnDel" -->
          <!-- >删除</el-button> -->
          <div class="tag_check">
            <el-radio-group v-model="radioTag" @change="tagSel">
              <el-radio :label="0">正常考勤</el-radio>
              <el-radio :label="1">考勤缺失</el-radio>
            </el-radio-group>
          </div>
          <el-button type="primary" size="medium" style="float:right;" v-if="btnUpload" @click="showFile">
            <i class="fa fa-cloud-upload" aria-hidden="true"></i> 上传
          </el-button>
        </el-row>
        <!-- 数据列表 -->
        <el-table
          :data="menusData"
          border
          @selection-change="selsChange"
          style="width: 100%"
          height="395"
          ref="menusData"
        >
          <!-- 序号 -->
          <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
          <!-- 工号 -->
          <el-table-column
            :show-overflow-tooltip="true"
            prop="userId"
            label="工号"
            width="100"
            fixed
          ></el-table-column>
          <!-- 员工姓名 -->
          <el-table-column
            :show-overflow-tooltip="true"
            prop="userName"
            label="员工姓名"
            width="100"
            fixed
          ></el-table-column>
          <!-- 考勤日期 -->
          <el-table-column label="考勤日期" sortable width="150" prop="attendDate"></el-table-column>
          <!-- 考勤时间 -->
          <el-table-column label="考勤时间" :show-overflow-tooltip="true" width="150" prop="attendTime"></el-table-column>
            <!-- 打卡时间 -->
          <el-table-column label="打卡时间" :show-overflow-tooltip="true" width="150" prop="clockTime"></el-table-column>
          <!-- 打卡结果 -->
          <el-table-column label="打卡结果" :show-overflow-tooltip="true" width="150" prop="result"></el-table-column>
          <!-- 打卡地址 -->
          <el-table-column label="打卡地址" :show-overflow-tooltip="true" prop="address"></el-table-column>
          <!-- 操作列 -->
          <el-table-column
            label="管理"
            fixed="right"
            align="center"
            width="100"
            v-if="[btnDel,btnEdit].indexOf(true) > -1"
          >
            <template slot-scope="scope">
              <!-- 修改 -->
              <el-button size="mini" @click="editHandle(scope.row, 1)" v-if="btnEdit" :disabled="isTwo">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="table-pageblock">
          <!-- current-page 当前页数  page-size 每页显示数 total 总页数-->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20,50,80,100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-card>
    </div>

    <el-dialog title="Excel文件上传" :visible.sync="fileVisible" width="600px">
      <div class="fileAsset">
        <el-form>
          <el-form-item label="选择文件">
            <input type="file" name="files" id="file" @change="verificationPicFile"/>
            <el-button type="primary" size="small" @click="fileAssetExcel">确认上传</el-button>
            <a class="down-btn" href="/static/file/hours.xlsx" download>模板下载</a>
          </el-form-item>
        </el-form>
        <p>友情提示：</p>
        <p>1、此操作为高风险操作，因此操作导致的数据问题，后果自负；</p>
        <p>2、只能上传xls/xlsx文件，且不超过2M。</p>
      </div>
    </el-dialog>

    <!-- 弹窗 新增or修改 -->
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <!-- 添加、修改表单 -->
      <el-form ref="editForm" :model="editForm" label-width="80px" :rules="editFormRules">
        <el-row :gutter="24">
          <el-col :span="12">
            <!-- 考勤日期 -->
            <el-form-item label="考勤日期" prop="attendDate">
              <el-date-picker
                v-model="editForm.attendDate"
                type="date"
                disabled>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 考勤时间 -->
            <el-form-item label="考勤时间" prop="attendTime">
              <el-time-select
                v-model="editForm.attendTime"
                :picker-options="{
                  start: '08:00',
                  step: '00:30',
                  end: '18:30'
                }"
                placeholder="选择考勤时间">
              </el-time-select>
            </el-form-item>
          </el-col>
           <el-col :span="12">
            <!-- 打卡结果 -->
            <el-form-item label="打卡结果" prop="result">
              <el-select
                v-model="editForm.result"
                filterable
                auto-complete="off"
                placeholder="请选择"
                style="width: 94%;"
              >
                <!-- 循环所有客户 客户名称 客户ID -->
                <el-option
                  v-for="(item,index) in attResult"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
          <!-- 打卡时间 -->
          <el-form-item label="打卡时间" prop="clockTime"  style="width:100%;">
            <el-time-picker
              arrow-control
              v-model="editForm.clockTime"
              placeholder="选择打卡时间">
            </el-time-picker>
          </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- 取消 关闭弹窗 -->
        <el-button @click.native="dialogFormVisible=false">取消</el-button>
        <!-- 添加 清空表单初始数据 -->
        <el-button
          v-if="dialogStatus=='create'"
          type="primary"
          @click="createData"
        >添加</el-button>
        <!-- 修改获取表单初始数据 -->
        <el-button v-else type="primary" @click="editData" >修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { _debounce } from '@/public/debounce.js';
import moment from 'moment';
export default {
  // 父组件传值子组件
  props: {
    // 按钮级权限
    btns: {
      type: Object
    }
  },

  // 无白屏刷新方法注入
  inject: ['reload'],

  // 监听
  watch: {
    // 按钮权限数据
    btns (val, oldVal) {
      // 刷新当前页
      this.reload();
    }
  },

  // 当前页面数据
  data () {
    return {
      // 打卡结果
      attResult: [{
        label: '正常',
        value: '正常'
      }, {
        label: '补卡审批通过',
        value: '补卡审批通过'
      }, {
        label: '迟到',
        value: '迟到'
      }, {
        label: '出差',
        value: '出差'
      }, {
        label: '打卡无效',
        value: '打卡无效'
      }, {
        label: '加班',
        value: '加班'
      }, {
        label: '旷工迟到',
        value: '旷工迟到'
      }, {
        label: '请假',
        value: '请假'
      }, {
        label: '外出',
        value: '外出'
      }, {
        label: '外勤',
        value: '外勤'
      }, {
        label: '严重迟到',
        value: '严重迟到'
      }, {
        label: '早退',
        value: '早退'
      }],

      // 按钮显示隐藏  - 默认值
      btnSel: true,
      btnDel: true,
      btnUpload: true,
      btnDown: true,
      btnAdd: true,
      btnEdit: true,

      // 搜索条件
      formInline: {
        // 员工姓名
        userName: '',
        // 考勤日期
        attendDate: '',
        // 打卡结果
        result: ''
      },

      cusList: [],

      groupList: [],

      // 列表数据
      menusData: [{}],
      // 当前页
      currentPage: 1,
      // 当前数
      pageSize: 20,
      // 总条目数
      total: 20,

      // 弹窗类别
      dialogStatus: '',

      // 弹窗标题
      textMap: {
        edit: '修改信息',
        create: '添加信息'
      },
      // 弹窗是否显示
      dialogFormVisible: false,

      // 列表选中列
      sels: [],

      // 编辑界面输入框校验规则
      editFormRules: {
        result: [
          { required: true, message: '请选择打卡结果', trigger: 'change' }
        ],
        attendTime: [
          { required: true, message: '请选择考勤时间', trigger: 'change' }
        ],
        clockTime: [
          { required: true, message: '请选择打卡时间', trigger: 'change' }
        ]
      },

      // 界面默认数据
      editForm: {
        result: '',
        attendTime: '',
        clockTime: ''
      },

      // Excel文件上传
      fileVisible: false,

      // 正常/异常
      radioTag: 0,
      isTwo: true
    };
  },

  // 实例创建后执行
  created () {
    // 按钮级授权
    this.authorization(this.$store.state.btns);

    // 获取所有用户
    this.getProlist();

    // 加载分页数据
    this.getmenusDataByPage();
  },

  methods: {
    // 工时导入
    showFile () {
      let _this = this;
      _this.fileVisible = true;
    },

    // 考勤筛选
    tagSel () {
      let _this = this;
      if (_this.radioTag === 1) {
        _this.isTwo = false;
        _this.selHandle();
      } else {
        _this.isTwo = true;
        _this.selHandle();
      }
    },

    // 文件判断
    verificationPicFile () {
      let _this = this;
      let file = document.querySelector('input[type=file]').files[0];
      let fileTypes = ['.xls', '.xlsx'];
      let fileMaxSize = 2048;// 2M
      let isNext = false;

      let fileName = file.name;
      let fileSize = file.size;

      if (fileName) {
        let fileEnd = fileName.substring(fileName.indexOf('.'));
        for (let i = fileTypes.length; i--;) {
          if (fileTypes[i] === fileEnd) {
            isNext = true;
            break;
          }
        }
        if (!isNext) {
          _this.$message({
            message: '不接受此文件类型！',
            type: 'error'
          });
          document.querySelector('input[type=file]').value = '';
          return false;
        }
      }
      if (fileName) {
        let size = fileSize / 2048;
        if (size > fileMaxSize) {
          _this.$message({
            message: '文件大小不能大于2M！',
            type: 'error'
          });
          document.querySelector('input[type=file]').value = '';
          return false;
        } else if (size <= 0) {
          _this.$message({
            message: '文件大小不能为0M！',
            type: 'error'
          });
          document.querySelector('input[type=file]').value = '';
          return false;
        }
      }
    },

    // 文件上传
    fileAssetExcel () {
      let _this = this;
      let file = document.querySelector('input[type=file]').files[0];

      if (file === null || file === undefined || file === '') {
        _this.$message({
          message: '未选择任何文件！',
          type: 'error'
        });
      } else {
        let formData = new FormData(); // 创建form对象
        formData.append('uploadFile', file);
        _this.$http.upload('api/uploadAttend', formData).then(res => {
          let { code } = res;
          if (code === 0) {
            _this.$message({
              type: 'success',
              message: '上传成功！'
            });
            _this.fileVisible = false;
            // 刷新列表
            _this.getmenusDataByPage();
          } else {
            _this.$message({
              message: '上传失败，请检查数据源是否正确！',
              type: 'error'
            });
          }
        }).catch(err => {
          if (err === undefined) {
            _this.$message({
              message: '服务器响应异常！',
              type: 'error'
            });
            return false;
          }
        });
      }
    },

    // 按钮级授权
    authorization (data) {
      let _this = this;
      for (let i in data) {
        if (data['sel'] === 0) {
          _this.btnSel = false;
        }
        if (data['add'] === 0) {
          _this.btnAdd = false;
        }
        if (data['del'] === 0) {
          _this.btnDel = false;
        }
        if (data['upload'] === 0) {
          _this.btnUpload = false;
        }
        if (data['down'] === 0) {
          _this.btnDown = false;
        }
        if (data['edit'] === 0) {
          _this.btnEdit = false;
        }
        return i;
      }
    },

    // 获取所有用户
    getProlist () {
      let _this = this;
      let params = {
        status: ''
      };
      _this.$http.post('api/findAllBaseUsers', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          for (let i = datas.length; i--;) {
            _this.groupList.push({
              label: datas[i].userName,
              value: datas[i].userName
            });
          };
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 查询
    selHandle: function () {
      let _this = this;
      let params = {};
      if (!_this.isTwo) {
        // 收集请求数据
        params = {
          // 员工姓名
          userName: _this.formInline.userName === null ? '' : _this.formInline.userName,
          // 考勤日期
          attendDate: _this.formInline.attendDate.length > 0 ? moment(_this.formInline.attendDate[0]).format('YYYY-MM-DD') : '',
          attendDateEnd: _this.formInline.attendDate.length > 0 ? moment(_this.formInline.attendDate[1]).format('YYYY-MM-DD') : '',
          // 打卡结果
          result: this.formInline.result === null ? '' : _this.formInline.result,
          isAttend: 1,
          // isClock: 1,
          pageNum: _this.currentPage,
          pageSize: _this.pageSize
        };
      } else {
        // 收集请求数据
        params = {
          // 员工姓名
          userName: _this.formInline.userName === null ? '' : _this.formInline.userName,
          // 考勤日期
          attendDate: _this.formInline.attendDate.length > 0 ? moment(_this.formInline.attendDate[0]).format('YYYY-MM-DD') : '',
          attendDateEnd: _this.formInline.attendDate.length > 0 ? moment(_this.formInline.attendDate[1]).format('YYYY-MM-DD') : '',
          // 打卡结果
          result: this.formInline.result === null ? '' : _this.formInline.result,
          isAttend: 0,
          // isClock: 0,
          pageNum: _this.currentPage,
          pageSize: _this.pageSize
        };
      }
      // 根据条件获取分页数据
      _this.$http.raw('api/findAttendList', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          // 总页数
          _this.total = datas.total;
          // 数据结果集
          _this.menusData = datas.list;
          // 解决删除当前页数据后仍留在那一页 不跳回上一页的bug
          if (!datas.list.length && _this.currentPage !== 1) {
            // 当前页减一
            _this.currentPage -= 1;
            // 调用自己
            _this.getmenusDataByPage();
          }
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 刷新页面数据
    getmenusDataByPage () {
      let _this = this;
      let params = {};
      if (!_this.isTwo) {
        // 收集请求数据
        params = {
          // 员工姓名
          userName: _this.formInline.userName === null ? '' : _this.formInline.userName,
          // 考勤日期
          attendDate: _this.formInline.attendDate.length > 0 ? moment(_this.formInline.attendDate[0]).format('YYYY-MM-DD') : '',
          attendDateEnd: _this.formInline.attendDate.length > 0 ? moment(_this.formInline.attendDate[1]).format('YYYY-MM-DD') : '',
          // 打卡结果
          result: this.formInline.result === null ? '' : _this.formInline.result,
          isAttend: 1,
          // isClock: 1,
          pageNum: _this.currentPage,
          pageSize: _this.pageSize
        };
      } else {
        // 收集请求数据
        params = {
          // 员工姓名
          userName: _this.formInline.userName === null ? '' : _this.formInline.userName,
          // 考勤日期
          attendDate: _this.formInline.attendDate.length > 0 ? moment(_this.formInline.attendDate[0]).format('YYYY-MM-DD') : '',
          attendDateEnd: _this.formInline.attendDate.length > 0 ? moment(_this.formInline.attendDate[1]).format('YYYY-MM-DD') : '',
          // 打卡结果
          result: this.formInline.result === null ? '' : _this.formInline.result,
          isAttend: 0,
          // isClock: 0,
          pageNum: _this.currentPage,
          pageSize: _this.pageSize
        };
      }
      // 获取分页数据
      _this.$http.raw('api/findAttendList', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          _this.total = datas.total;
          _this.menusData = datas.list;
          // 解决删除当前页数据后仍留在那一页 不跳回上一页的bug
          if (!datas.list.length && _this.currentPage !== 1) {
            // 当前页减一
            _this.currentPage -= 1;
            // 调用自己
            _this.getmenusDataByPage();
          }
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 每页显示的条数改变
    handleSizeChange (val) {
      this.pageSize = val;
      // 调用刷新页面
      this.getmenusDataByPage();
    },
    // 当前页码
    handleCurrentChange (val) {
      this.currentPage = val;
      // 调用
      this.getmenusDataByPage();
    },

    // 显示编辑界面
    editHandle: function (row) {
      let _this = this;
      // 弹窗类型
      _this.dialogStatus = 'edit';
      // 弹窗显示状态
      _this.dialogFormVisible = true;
      // 弹出窗表单初始值赋值
      _this.editForm = {
        id: row.id,
        result: row.result,
        attendDate: '20' + row.attendDate.substring(0, 8),
        attendTime: row.attendTime,
        clockTime: row.clockTime
      };
    },

    // 显示新增界面
    addHandle: function () {
      let _this = this;
      // 弹窗类型
      _this.dialogStatus = 'create';
      // 弹窗显示状态
      _this.dialogFormVisible = true;

      // 初始化新增界面默认数据
      _this.editForm = {
        cusName: '',
        parentId: '',
        cusType: '',
        industry: '',
        credibility: '',
        contact: '',
        address: '',
        note: ''
      };
    },
    // 修改
    editData: _debounce(function () {
      let _this = this;
      _this.$nextTick(() => {
        // 判断是否通过验证规则验证
        _this.$refs['editForm'].validate(valid => {
          if (valid) {
            // 收集请求数据
            let params = {
              id: _this.editForm.id,
              result: _this.editForm.result,
              attendTime: _this.editForm.attendDate + ' ' + _this.editForm.attendTime + ':00',
              clockTime: moment(_this.editForm.clockTime).format('YYYY-MM-DD HH:mm:ss')
            };
            // 修改异常考勤信息
            _this.$http.raw('api/updateAttend', params).then(res => {
              let { code } = res;
              // 判断Code状态
              if (code === 0) {
                _this.$message({
                  message: '修改成功！',
                  type: 'success'
                });
                // 初始化弹出窗表单数据
                _this.$refs['editForm'].resetFields();
                // 关闭弹窗
                _this.dialogFormVisible = false;
                // 刷新列表
                _this.getmenusDataByPage();
              }
            }).catch(err => {
              if (err === undefined) {
                _this.$message({
                  message: '服务器响应异常！',
                  type: 'error'
                });
                return false;
              }
            });
          }
        });
      });
    }, 200),

    // 添加
    createData: _debounce(function () {
      let _this = this;
      _this.$nextTick(() => {
        // 判断是否通过验证规则验证
        _this.$refs['editForm'].validate(valid => {
          if (valid) {
            // 收集请求参数
            let params = {
              cusName: _this.editForm.cusName === null ? '' : _this.editForm.cusName,
              cusType: _this.editForm.cusType === null ? '0' : _this.editForm.cusType,
              industry: _this.editForm.industry === null ? '0' : _this.editForm.industry,
              contact: _this.editForm.contact === null ? '' : _this.editForm.contact,
              address: _this.editForm.address === null ? '' : _this.editForm.address,
              note: _this.editForm.note === null ? '' : _this.editForm.note,
              parentId: _this.editForm.parentId === null ? 0 : _this.editForm.parentId,
              credibility: _this.editForm.credibility === null ? '0' : _this.editForm.credibility
            };
            // 获取客户名称
            let getCus = {
              cusName: _this.editForm.cusName
            };
            // 通过客户名称判断是否被占用
            _this.$http.post('api/getCusCount', getCus).then(res => {
              let { code, datas } = res;
              // 判断Code状态
              if (code === 0) {
                if (datas) {
                  _this.$message({
                    message: '客户名称被占用！',
                    type: 'error'
                  });
                } else {
                  // 添加用户
                  _this.$http.raw('api/insertCustom', params).then(res => {
                    let { code } = res;
                    // 判断Code状态
                    if (code === 0) {
                      _this.$message({
                        message: '添加成功！',
                        type: 'success'
                      });
                      _this.$refs['editForm'].resetFields();
                      _this.dialogFormVisible = false;
                      // 刷新列表
                      _this.getmenusDataByPage();
                      _this.getProlist();
                    }
                  }).catch(err => {
                    if (err === undefined) {
                      _this.$message({
                        message: '服务器响应异常！',
                        type: 'error'
                      });
                      return false;
                    }
                  });
                }
              }
            }).catch(err => {
              if (err === undefined) {
                _this.$message({
                  message: '服务器响应异常！',
                  type: 'error'
                });
                return false;
              }
            });
          }
        });
      });
    }, 200),

    // 删除
    handleDelete (data) {
      let _this = this;
      // 二次删除确认
      _this.$confirm('确认删除选中的信息吗？', '提示', {
        type: 'warning'
      }).then(() => {
        // 修改状态，逻辑删除
        let params = [data.id];
        // 根据数据ID删除对应用户信息
        _this.$http.raw('api/batchDelCustom', params).then(res => {
          let { code } = res;
          if (code === 0) {
            _this.$message({
              type: 'success',
              message: '删除成功！'
            });
            // 刷新列表
            _this.getmenusDataByPage();
            _this.getProlist();
          }
        }).catch(err => {
          if (err === undefined) {
            _this.$message({
              message: '服务器响应异常！',
              type: 'error'
            });
            return false;
          }
        });
      }).catch(() => {
        _this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 全选、单选、多选
    selsChange: function (sels) {
      this.sels = sels;
    },

    // 批量删除
    batchRemove: function () {
      let _this = this;
      // 判断是否选择数据
      if (!_this.sels.length) {
        _this.$message.warning('您还没选择任何数据！');
        return;
      }
      // 二次删除确认
      _this.$confirm('确认删除选中的信息吗？', '提示', {
        type: 'warning'
      }).then(() => {
        // 修改状态，逻辑删除
        let params = [];
        // 获取选中数据ID集合
        _this.sels.map(item => {
          return params.push(item.id);
        });
        // 删除对应ID用户信息
        _this.$http.raw('api/batchDelCustom', params).then(res => {
          let { code } = res;
          if (code === 0) {
            _this.$message({
              type: 'success',
              message: '批量删除成功！'
            });
            // 刷新列表
            _this.getmenusDataByPage();
            _this.getProlist();
          }
        }).catch(err => {
          if (err === undefined) {
            _this.$message({
              message: '服务器响应异常！',
              type: 'error'
            });
            return false;
          }
        });
      }).catch(() => {
        _this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
};
</script>

<style lang='scss' scoped>
@import './index.scss';
</style>
